<form action="">
  <label for="">
    姓名: <input type="text" name="name">
  </label>
  <label for="">
    文件：<input id="file" type="file" name="file">
  </label>
  <label for="">
    <input type="button" value="保存">
  </label>
</form>


<script>
  var btn = document.querySelector('[type=button]');
  btn.onclick = function () {
    // 通过FormData将文件转成二进制数据
    var formData = new FormData();
    formData.append('upload', document.querySelector('[type=file]').files[0]);
    formData.delete('upload')
    console.log('formData', formData.get('upload'));

    var xhr = new XMLHttpRequest;
    xhr.open('post', 'file.php');
    // 监听上传进度
    xhr.upload.onprogress = function (ev) {
      var percent = (ev.loaded / ev.total) * 100 + '%';
      console.log(percent);
      progress.style.width = percent;
    }

    xhr.send(formData);

    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
      }
    }
  }
</script>